<template>
  <el-card>
    <div class="page">
      <h3>运费模板</h3>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane class="deta" label="商品运费设置" name="first">
          <div class="linkbtn">
            <el-button type="primary" @click="newmodel" size="small">新建运费模板</el-button>
          </div>
          <div v-for = "temp in templates" :key = "temp.templateId">
            <div class="arrs">
              <div class="titles">
                <div>{{ temp.templateName}}</div>
                <div class="sideyou">
                  <div class="times">最后编辑时间：{{ temp.updateTime | time('-:') }}</div>
                  <div class="twobtns">
                    <el-button type="text" @click="edit(temp.templateId)">编辑</el-button>
                    <el-button type="text" @click="dele(temp.templateId)">删除</el-button>
                  </div>
                </div>
              </div>
              <el-table class="table" :data="temp.shippingTemplateAreaList">
                <el-table-column label="快送方式" align="center">
                  <template slot-scope = "scope">
                    <span v-if = "scope">快递</span>
                  </template>
                </el-table-column>
                <el-table-column prop="areaNames" label="区域" align="center"></el-table-column>
                <el-table-column prop="goodsInitNum" label="首件（件）" align="center"></el-table-column>
                <el-table-column prop="goodsInitFreight" label="运费（元）" align="center"></el-table-column>
                <el-table-column prop="goodsAddNum" label="续件（件）" align="center"></el-table-column>
                <el-table-column prop="goodsAddFreight" label="运费（元）" align="center"></el-table-column>
              </el-table>
            </div>
          </div>
          <div class="page" v-if = "total">
            <el-pagination background style="float:right;margin:26px 0 30px"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
          </el-tab-pane>
        <!-- <el-tab-pane class="connect" label="商品运费设置" name="second">店铺运费设置</el-tab-pane> -->
      </el-tabs>
    </div>
  </el-card>
</template>
<script>
export default {
  name: 'page',
  data () {
    return {
      form: {
        templateName: '',
        updateTime: ''
      },
      templates: [],
      currentPage: 1,
      pagesize: 10,
      total: 0,
      activeName: 'first'
      // tableData: []
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      let json = {
        merchantId: this.$store.state.merchantId
      }
      this.$tkAjax.post(`${this.$config.baseUrl}/order/shippingTemplate/getPageShippingTemplateByCondition`, {}, {
        params: {
          condition: json,
          page: this.currentPage,
          isGetTotalCount: true,
          pageSize: this.pagesize
        }
      }).then(({ data }) => {
        this.templates = data.content.list
        if (this.templates.length) {
          this.templates = this.templates.map(item => {
            item.areaNames = '全国'
            item.shippingTemplateAreaList.unshift(item)
            return item
          })
        }
        this.total = data.content.totalCount
      }).catch(err => {
        this.$message.warning(err.data.message)
      })
    },
    //编辑
    edit (row) {
      this.$router.push({
        path: '/newly',
        query: {
          tempid: row
        }
      })
    },
    //删除
    dele (row) {
      this.$tkAjax.post(`${this.$config.baseUrl}/order/shippingTemplate/deleteShippingTemplateById`, {}, {
        params: {
          shippingTemplateId: row
        }
      }).then(({ data }) => {
        this.$message.success(data.message)
        this.init()
      }).catch(err => {
        this.$message.warning(err.data.message)
      })
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    newmodel () {
      this.$router.push('/newly')
      // this.$router.push('/storepay')
    },
    handleSizeChange (val) {
      this.pagesize = val
      this.init()
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.init()
    }
  }
}
</script>
<style lang="scss" scope>
.page {
  .linkbtn {
    padding: 10px 0;
    .el-button {
      border-radius: 4px;
    }
  }
  .titles {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f5f5f5;
    padding: 0 27px;
    font-size: 14px;
    .sideyou {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .times {
        padding-right: 30px;
      }
    }
  }
  .arrs {
    .table {
      width: 80%;
      padding-top: 20px;
      margin-left: 50px;
    }
  }
}
</style>
